<!--
 * @Author: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @Date: 2024-02-03 22:34:39
 * @LastEditors: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @LastEditTime: 2024-02-29 16:10:55
 * @FilePath: \ycq\ycq\ycq1.0\src\pages\personal\three-router\setPassword.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <a-breadcrumb style="margin: 16px" separator=">">
      <a-breadcrumb-item
        v-for="(item, index) in $route.matched"
        :key="index"
        :to="{ path: item.path }"
        style="cursor: pointer"
      >
        {{ item.meta.title }}
      </a-breadcrumb-item>
    </a-breadcrumb>
    <div class="content">
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
        :rules="rules"
        class="form"
        ref="refForm"
      >
        <a-form-item label="旧密码" name="odlPassword">
          <a-input-password v-model:value="formState.odlPassword" />
        </a-form-item>

        <a-form-item label="新密码" name="newPassword">
          <a-input-password v-model:value="formState.newPassword" />
        </a-form-item>
        <a-form-item label="确认密码" name="confirmPassword">
          <a-input-password v-model:value="formState.confirmPassword" />
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button
            html-type="submit"
            style="border: none; color: #816d65; margin-left: 28%"
            >确定</a-button
          >
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

import { updataPwd } from "@/service/api.js";
import LocalCatch from "@/utils/token.js";
import { message } from "ant-design-vue";
const formState = ref({
  odlPassword: "",
  newPassword: "",
  confirmPassword: "",
});
const refForm = ref(null);
// 密码校验
const validatorUserPwd = (rule, value) => {
  if (!value) {
    return Promise.reject("请输入密码");
  }
  if (
    !/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/.test(
      value
    )
  ) {
    // 默认密码
    if (value === "123456") {
      return Promise.resolve();
    } else
      return Promise.reject(
        "请输入6-20位英文字母、数字或者符号(除空格),且字母、数字和标点符号至少包含两种"
      );
  } else {
    return Promise.resolve();
  }
};
const validatorNewPwd = (rule, value) => {
  if (!value) {
    return Promise.reject("请输入密码");
  }
  if (
    !/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/.test(
      value
    )
  ) {
    return Promise.reject(
      "请输入6-20位英文字母、数字或者符号(除空格),且字母、数字和标点符号至少包含两种"
    );
  } else {
    return Promise.resolve();
  }
};
// 确认密码校验
const validatorConfirmPassword = (rule, value) => {
  if (!value) {
    return Promise.reject("请确认密码");
  }
  if (formState.value.newPassword !== value) {
    return Promise.reject("两次输入密码不一致");
  } else {
    return Promise.resolve();
  }
};
// 提交成功
const onFinish = (values) => {
  console.log("Success:", values);
  refForm.value
    .validate()
    .then(async () => {
      console.log(formState.value);
      const userId = parseInt(LocalCatch.getToken("userId"));
      // 校验成功
      const res = await updataPwd({
        ...formState.value,
        userId,
      });
      console.log(res);
      if (res.code === 1) {
        // 修改成功
        message.success(res.data);
        setTimeout(() => {
          formState.value = {};
        }, 500);
      } else if (res.code === 401) {
        message.error("新密码不能与旧密码相同");
      } else message.error(res.data);
    })
    .catch((err) => {});
};
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};

const rules = {
  odlPassword: [{ required: true, validator: validatorUserPwd }],
  newPassword: [{ required: true, validator: validatorNewPwd }],
  confirmPassword: [{ required: true, validator: validatorConfirmPassword }],
};
</script>
<style scoped>
.content {
  display: flex;
  flex-flow: column nowrap;
  margin-top: 40px;
  .form {
    position: relative;
    left: 20%;
    width: 450px;
  }
}
</style>
